<template>
  <div id="category">
    <navigation-bar class="categoryNav">
      <template v-slot:center>
        商品分类
      </template>
    </navigation-bar>
    <div class="category-content">
      <div class="menu">
        <scroll class="menu-scroll">
          <div v-for="(item,index) in categories" :key="item.maitkey" class="menu-item"
            :class="{active:activeIndex===index}" @click="handleSelect(index)">{{item.title}}</div>
        </scroll>
      </div>
      <div class="subContent">
        <scroll class="subCate-scroll"
            :probeType="3"
            ref="scroll"
            @scroll="handleposition"
        >
          <!-- 子分类商品展示 -->
          <div class="subCategories">
            <div v-for="(item,index) in showSubcategory" :key="index" class="cateItem">
              <img :src="item.image" alt="">
              <div class="cateTitle">{{item.title}}</div>
            </div>
          </div>
          <!-- tabControl -->
          <tab-control :titles="['流行','新款','精选']" @tabClick="handleSelectTab" ref="tabControl"></tab-control>
          <!-- 商品详细信息展示 -->
          <div class="subCateDetail">
            <goods :goods="showSubCateDetail"></goods>
          </div>
        </scroll>
      </div>
    </div>
    <!-- 返回顶部 -->
    <back-top ref="backTotop" @click.native="handlebackToptop" v-show="backTopShow"></back-top>
  </div>
</template>

<script>
  import {
    getCategoryDate,
    getSubCategory,
    getCategoryDetails
  } from '../../network/category.js'
  import scroll from 'components/common/scroll/scroll.vue'
  import navigationBar from 'components/common/navigation-bar.vue'
  import goods from 'components/context/goods/goods.vue'
  import tabControl from 'components/common/tabcontrol/tabcontrol.vue'
  import backTop from 'components/context/backTop/backtop.vue'
  export default {
    name: "category",
    data() {
      return {
        categories: [],
        subCateData: [{
          subCategory: [],
          categoryDetails: {
            'new': [],
            'pop': [],
            'sell': []
          }
        }],
        activeIndex: 0,
        type: 'pop',
        backTopShow:false
      }
    },
    created() {

      // 获取菜单列表
      this._getCategoryDate()
    },
    components: {
      scroll,
      navigationBar,
      goods,
      tabControl,
      backTop
    },
    methods: {
      async _getCategoryDate() {
        const res = await getCategoryDate()
        const lists = res.data.data.category.list
        this.categories = lists
        // 根据菜单分类获取对应子分类 默认是分类索引值0开始获取
        //this._getSubCategory(0)
        //初始化商品详细信息
        for (let i = 0; i < this.categories.length; i++) {
          this.$set(this.subCateData, i, {
            subCategory: [],
            categoryDetails: {
              'new': [],
              'pop': [],
              'sell': []
            }

          })
        }
        this._getSubcate(0)
        this._getSubcate(0, 'new','pop','sell')

      },

      async _getSubcate(index, type) {

        if (arguments.length == 1) {
          const maitkey = this.categories[index].maitKey
          const res = await getSubCategory(maitkey)
          //this.$set(this.subCateData[index],'subCategory',res.data.data.list)
          this.subCateData[index].subCategory = res.data.data.list
        } else if (arguments.length > 2) {
          const miniWallkey = this.categories[index].miniWallkey
          const arr = [...arguments].slice(1)
          arr.forEach(async item=>{
            const {data} = await getCategoryDetails(miniWallkey, item)
            this.subCateData[index].categoryDetails[item] = data
          })

        }
        const data = JSON.stringify(this.subCateData)
        window.sessionStorage.setItem('subCatedata', data)
      },

      //事件监听
      handleSelect(index) {
        const subData = JSON.parse(window.sessionStorage.getItem('subCatedata'))

        if (subData[index].subCategory.length !== 0) {
          //如果缓存中已经存在那么就使用缓存中的数据
          this.subCateData = subData
        } else {
          //否则重新发送请求
          this._getSubcate(index)
          this._getSubcate(index, 'new','pop','sell')
        }
        this.activeIndex = index
      },
      handleSelectTab(tabIndex) {
        this.$refs.tabControl.currentIndex = tabIndex
        this.type = tabIndex == 0 ? 'new' : tabIndex == 1 ? 'pop' : tabIndex == 2 ? 'sell' : 'pop'
      },
      handleposition(position){
        this.backTopShow = Math.abs(position.y)>1000
      },
      handlebackToptop(){
        this.$refs.scroll.bs.scrollTo(0,0,500)
      }
    },
    computed: {
      showSubcategory() {
        if (this.activeIndex === -1) return {}
        return this.subCateData[this.activeIndex].subCategory
      },
      // 展示商品详情
      showSubCateDetail() {
        if (this.activeIndex === -1) return {}
        return this.subCateData[this.activeIndex].categoryDetails[this.type]
      }
    }
  }
</script>

<style scoped>
  .categoryNav {
    background-color: #FF8198;
    font-weight: 600;
    z-index: 999;
  }

  .category-content {
    display: flex;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }

  .menu {
    flex: 2;
    height: 100%;
    font-size: 14px;
    background-color: #f6f6f6
  }

  .menu-scroll,
  .subCate-scroll {
    height: 100%;
    overflow: hidden;
  }

  .menu-item {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  .subContent {
    flex: 6;
    width: 0;
    padding: 10px;
  }

  .subCategories {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  }

  .cateItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33%;
  }

  .cateItem img {
    width: 80%;
    vertical-align: middle;
  }

  .cateItem .cateTitle {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }

  .active {
    color: #f55777;
    font-weight: 700;
    background-color: #fff;
    border-left: 6rpx solid #f55777;
  }
</style>
